<template>
	<view class="setUpASeal">
		<canvas canvas-id="writeCanvas" class="writeCanvas" disable-scroll="true" @touchstart="touchStart"
			@touchmove="touchMove" @touchend="touchEnd" />
		<view class="flex btn">
			<view class="clearBtn" @tap="clear">重写</view>
			<view class="saveBtn" @tap="saveCanvas">确定</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		unref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	// 初始化画布
	let ctx = null
	let isButtonDown = false
	let lastX = 0
	let lastY = 0
	let points = []
	onLoad(() => {
		ctx = uni.createCanvasContext('writeCanvas')
		// 设置画笔样式
		ctx.lineWidth = 4
		ctx.lineCap = 'round'
		ctx.lineJoin = 'round'
	})

	// 触摸开始，获取到起点
	function touchStart(e) {
		lastX = e.changedTouches[0].x
		lastY = e.changedTouches[0].y
		let startPoint = {
			X: lastX,
			Y: lastY
		}
		points.push(startPoint) // 把起点存起来
		ctx.beginPath() // 每次触摸开始，开启新的路径
		isButtonDown = true
	}

	// 触摸移动，获取到路径点
	function touchMove(e) {
		if (isButtonDown) {
			const currentX = e.changedTouches[0].x
			const currentY = e.changedTouches[0].y
			let movePoint = {
				X: currentX,
				Y: currentY
			}
			points.push(movePoint) // 存点
			let len = points.length
			if (len >= 2) {
				draw() // 绘制路径
			}
		}
	}

	// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
	function touchEnd() {
		points = []
		isButtonDown = false
	}

	// 绘画
	function draw() {
		let point1 = points[0]
		let point2 = points[1]
		points.shift()
		ctx.moveTo(point1.X, point1.Y)
		ctx.lineTo(point2.X, point2.Y)
		ctx.stroke()
		ctx.draw(true)
	}

	const upload = async (tempFilePath) => {
		let res = await uploadFile(tempFilePath)
		const {
			data
		} = JSON.parse(res)
		// 保存签章
		let params = {
			handwrittenSignatureUrl: data.url,
			organId: unref(userInfo).doctorLoginInfo.organId,
			doctorId: unref(userInfo).doctorLoginInfo.doctorId,
		}
		let setHandwrittenInfo = await CASERVICE.setHandwrittenSignature(params)
		return setHandwrittenInfo
	}

	// 保存图片
	function saveCanvas() {
		uni.showLoading({
			title: '保存中...',
			mask: true
		})
		uni.canvasToTempFilePath({
			canvasId: 'writeCanvas',
			async success(res) {
				let path = res.tempFilePath
				uni.saveImageToPhotosAlbum({
					filePath:path,
					success() {
						uni.showToast({
							title: '保存成功',
							icon: 'none',
							duration: 1000
						})
					}
				})
			}
		})
		uni.hideLoading()
	}

	// 清除画布
	function clear() {
		ctx.clearRect(0, 0, 1000, 1000)
		ctx.draw(true)
	}
</script>

<style lang="scss" scoped>
	.setUpASeal {
		border-top: 2rpx solid #f7f7f7;
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		.writeCanvas {
			width: 100%;
			height: 100%;
		}

		.btn {
			position: fixed;
			right: 20rpx;
			bottom: 60rpx;
			z-index: 999;
			font-size: 20rpx;
			color: #fff;
			text-align: center;
			display: flex;
			color: #333;

			.clearBtn {
				margin-right: 32rpx;
				background-color: #ffc400;
				border-radius: 8rpx;
				padding: 10rpx 20rpx;

			}

			.saveBtn {
				background-color: #ff6700;
				border-radius: 8rpx;
				padding: 10rpx 20rpx;
			}
		}
	}
</style>